import React, { useMemo, useRef, useState, useEffect } from 'react'
import { Popup } from 'antd-mobile'
import './Popup.scss'
import { Price } from '@nutui/nutui-react'

export default function (props) {
    const color = useRef()
    const [visible1, setVisible1] = useState(false)
    const [data, setData] = useState(props.data)
    const [submit, setSubmit] = useState({})
    useMemo(() => {
        if (props.data) {
            setVisible1(true)
        }
    }, [data])
    useMemo(() => {
        setData(props.data)
    }, [props])
    
    const addColor = () => {
        const cope = { ...submit }
        cope.color = color.current.innerText
        setSubmit(cope)
        cope.content = data
        if(cope.num != 1 || !cope.num){
            cope.num = 1
        }
        setSubmit(cope)
        
    }
    const addCart = ()=>{
        if(!submit.color){
            alert('请选择颜色')
            return
        }
        console.log(submit);
        setVisible1(false)
    }
    const setVisible = () => {
        setVisible1(false)
    }
    return (
        <div>
            <Popup
                visible={visible1}
                onClose={() => {
                    console.log('close');
                    setVisible1(false)
                }}
                bodyStyle={{ height: '60vh' }}
            >
                <div className="top">
                    <img src={data ? data.img : ''} className='img' />
                    <div className="PopupInfo">
                        <div className="title">{data ? data.title : ''}</div>
                        <div className="price">活动价
                            <Price price={data ? data.price : ''} size="large" thousands />
                            <span>&nbsp;</span>

                            <Price price={1513.88} thousands line />
                        </div>
                        <div className="desc">春季换新. 2件99折</div>
                        <div className="selectInfo">已选择{ }-{ }</div>
                        <button className='close' onClick={setVisible}>x</button>
                    </div>
                </div>
                <div className="color">
                    <div className="color-title">颜色分类</div>
                    <div className="colorButton">
                        <button className='color-btn' onClick={addColor} ref={color}>黑色</button>
                    </div>
                </div>
                <hr />
                <div className="cima">
                    <p>
                        <span>尺码</span>
                        <span>查看尺码详情</span>
                    </p>
                </div>
                <hr />
                <div className="num">

                </div>
                <div className="submit"  onClick={()=>{addCart()}}><button>确认</button></div>
            </Popup>

        </div>
    )
}
